{% extends 'base/base_site.html' %} 

{% block content %}
<div class="ibox-title">
  <h5>统计报表</h5>
</div>
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">Users</span>
                    <h5>用户总数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins"><a href="{% url 'accounts_user' %}">{{sumusers}}</a></h1>
                    <small>All user</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">Hosts</span>
                    <h5>物理机总数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins"><a href="{% url 'server_list' %}">{{sumhosts}}</a></h1>
                    <small>All host</small>
                </div>
            </div>
        </div>
         <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">Vhosts</span>
                    <h5>虚拟机总数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins"><a href="{% url 'vmlist' %}">{{sumvhosts}}</a></h1>
                    <small>All Vhosts</small>
                </div>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-danger pull-right">Applications</span>
                    <h5>应用总数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins"><a href="{% url 'app_list' %}">{{sumapp}}</a></h1>
                    <small>All applications</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row">

    <div class="col-lg-4">
    <div id="vmcluster_cpu" style="width:300px;height:300px;"></div>
    </div>
     <div class="col-lg-4">
    <div id="vmcluster_mem" style="width:300px;height:300px;"></div>
    </div>
    <div class="col-lg-4">
    <div id="vmcluster_disk" style="width:300px;height:300px;"></div>
    </div>

    </div>
    <div class="row">

    <div class="col-lg-7">
    <div id="vmcluster_servers" style="width:1000px;height:450px;"></div>
    </div>

    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ block.super}}
<script src="/static/js/plugins/echart/echarts.min.js"></script>
<script src="/static/js/plugins/echart/macarons.js"></script>
<script src="/static/js/plugins/echart/vintage.js"></script>
<script src="/static/js/plugins/echart/infographic.js"></script>
<script src="/static/js/plugins/echart/shine.js"></script>
<script src="/static/js/plugins/echart/dark.js"></script>
<script src="/static/js/plugins/echart/pie.js"></script>
<script src="/static/js/plugins/echart/line.js"></script>

<script type="text/javascript">


                  var myChart = echarts.init(document.getElementById('vmcluster_cpu'), 'infographic');

                  // 指定图表的配置项和数据
                  var option = {
                      title: {
                          //                link:"www.baidu.com",
                          text: 'cpu资源池',
                          subtext: '单位:核',
                          borderColor: 'black',
                          x: 'center'

                      },
                      tooltip: {
                          trigger: 'item',
                          formatter: "{a} <br/>{b} : {c} ({d}%)"
                      },
                      legend: {
                          orient: 'vertical',
                          x: 'left',
                          data: ['已使用', '未使用']
                      },
                      toolbox: {
                          show: true,
                          feature: {
                              mark: {show: true},
                              dataView: {show: true, readOnly: false},
                              magicType: {
                                  show: true,
                                  type: ['pie', 'funnel'],
                                  option: {
                                      funnel: {
                                          x: '25%',
                                          width: '50%',
                                          funnelAlign: 'left',
                                          max: 1548
                                      }
                                  }
                              },
                              restore: {show: true},
                              saveAsImage: {show: true}
                          }
                      },
                      calculable: true,
                      series: [{
                          name: 'CPU',
                          type: 'pie',
                          radius: '50%',
                          center: ['50%', '60%'],
                          data: (function () {
                              var arr = [];
                              $.ajax({
                                  type: "post",
                                  async: false, //同步执行
                                  url: '{% url 'cpuinfo' %}',
                                  data: {},
                                  dataType: "json", //返回数据形式为json
                                  success: function (result) {
//                                      console.log(result)
                                      //alert(result)
                                      if (result) {
                                          for(var o in result){
                                              arr.push({
                                                  name:  o,
                                                  value: result[o]
                                              });

                                          }
                                      }

                                  },
                                  error: function (errorMsg) {
                                      alert("不好意思,图表请求数据失败啦!");
                                      myChart.hideLoading();
                                  }
                              })
                              return arr;
                          })()

                      }
                      ]
                  };

                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);


</script>
<script type="text/javascript">


                  var myChart = echarts.init(document.getElementById('vmcluster_mem'), 'infographic');

                  // 指定图表的配置项和数据
                  var option = {
                      title: {
                          //                link:"www.baidu.com",
                          text: '内存资源池',
                          subtext: '单位:G',
                          borderColor: 'black',
                          x: 'center'

                      },
                      tooltip: {
                          trigger: 'item',
                          formatter: "{a} <br/>{b} : {c} ({d}%)"
                      },
                      legend: {
                          orient: 'vertical',
                          x: 'left',
                          data: ['已使用', '未使用']
                      },
                      toolbox: {
                          show: true,
                          feature: {
                              mark: {show: true},
                              dataView: {show: true, readOnly: false},
                              magicType: {
                                  show: true,
                                  type: ['pie', 'funnel'],
                                  option: {
                                      funnel: {
                                          x: '25%',
                                          width: '50%',
                                          funnelAlign: 'left',
                                          max: 1548
                                      }
                                  }
                              },
                              restore: {show: true},
                              saveAsImage: {show: true}
                          }
                      },
                      calculable: true,
                      series: [{
                          name: 'MEM',
                          type: 'pie',
                          radius: '50%',
                          center: ['50%', '60%'],
                          data: (function () {
                              var arr = [];
                              $.ajax({
                                  type: "post",
                                  async: false, //同步执行
                                  url: '{% url 'meminfo' %}',
                                  data: {},
                                  dataType: "json", //返回数据形式为json
                                  success: function (result) {
//                                      console.log(result)
                                      //alert(result)
                                      if (result) {
                                          for(var o in result){
                                              arr.push({
                                                  name:  o,
                                                  value: result[o]
                                              });

                                          }
                                      }

                                  },
                                  error: function (errorMsg) {
                                      alert("不好意思,图表请求数据失败啦!");
                                      myChart.hideLoading();
                                  }
                              })
                              return arr;
                          })()

                      }
                      ]
                  };

                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);


</script>
<script type="text/javascript">


                  var myChart = echarts.init(document.getElementById('vmcluster_disk'), 'infographic');

                  // 指定图表的配置项和数据
                  var option = {
                      title: {
                          //                link:"www.baidu.com",
                          text: '存储资源池',
                          subtext: '单位:G',
                          borderColor: 'black',
                          x: 'center'

                      },
                      tooltip: {
                          trigger: 'item',
                          formatter: "{a} <br/>{b} : {c} ({d}%)"
                      },
                      legend: {
                          orient: 'vertical',
                          x: 'left',
                          data: ['已使用', '未使用']
                      },
                      toolbox: {
                          show: true,
                          feature: {
                              mark: {show: true},
                              dataView: {show: true, readOnly: false},
                              magicType: {
                                  show: true,
                                  type: ['pie', 'funnel'],
                                  option: {
                                      funnel: {
                                          x: '25%',
                                          width: '50%',
                                          funnelAlign: 'left',
                                          max: 1548
                                      }
                                  }
                              },
                              restore: {show: true},
                              saveAsImage: {show: true}
                          }
                      },
                      calculable: true,
                      series: [{
                          name: 'DISK',
                          type: 'pie',
                          radius: '50%',
                          center: ['50%', '60%'],
                          data: (function () {
                              var arr = [];
                              $.ajax({
                                  type: "post",
                                  async: false, //同步执行
                                  url: '{% url 'diskinfo' %}',
                                  data: {},
                                  dataType: "json", //返回数据形式为json
                                  success: function (result) {
//                                      console.log(result)
                                      //alert(result)
                                      if (result) {
                                          for(var o in result){
                                              arr.push({
                                                  name:  o,
                                                  value: result[o]
                                              });

                                          }
                                      }

                                  },
                                  error: function (errorMsg) {
                                      alert("不好意思,图表请求数据失败啦!");
                                      myChart.hideLoading();
                                  }
                              })
                              return arr;
                          })()

                      }
                      ]
                  };

                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);


</script>
<script type="text/javascript">

var myChart = echarts.init(document.getElementById('vmcluster_servers'), 'macarons');

var option = {
        title : {
            text: '虚拟机使用分布',
            subtext: '展示前15位'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['申请台数']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                  type : 'category',
                  data: (function () {
                              var arr = [];
                              $.ajax({
                                  type: "post",
                                  async: false, //同步执行
                                  url: '{% url 'serversinfo' %}',
                                  data: {},
                                  dataType: "json", //返回数据形式为json
                                  success: function (result) {
                                      console.log(result)
                                      //alert(result)
                                      if (result) {
                                          for(var o in result){
                                              arr.push(o);
                                          }
                                      }
                                  },
                                  error: function (errorMsg) {
                                      alert("不好意思,图表请求数据失败啦!");
                                      myChart.hideLoading();
                                  }
                              })
                              return arr;
                          })(),
                       axisLabel:{
                               interval:0,//横轴信息全部显示
                               rotate:-30,//-30度角倾斜显示
                          }


            }

        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
                    {
                        name:'申请台数',
                        type:'bar',
                         data: (function () {
                              var arr = [];
                              $.ajax({
                                  type: "post",
                                  async: false, //同步执行
                                  url: '{% url 'serversinfo' %}',
                                  data: {},
                                  dataType: "json", //返回数据形式为json
                                  success: function (result) {
                                      console.log(result)

                                      if (result) {
                                          for(var o in result){
//                                              alert(result[o])
                                              arr.push(result[o]);
                                          }
                                      }
                                  },
                                  error: function (errorMsg) {
                                      alert("不好意思,图表请求数据失败啦!");
                                      myChart.hideLoading();
                                  }
                              })
                              return arr;
                          })(),
                        label: {
                          normal: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'red'
                                           }
                                  }
                                }

                    },

                 ]
};

                  // 使用刚指定的配置项和数据显示图表。
                  myChart.setOption(option);


</script>

{% endblock %}

